import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_axrjc/routes.dart';
import 'package:flutter_axrjc/style.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
import 'package:get/get.dart';
import 'package:video_thumbnail/video_thumbnail.dart';

import 'logic.dart';

class CheckGuidePage extends StatelessWidget {
  const CheckGuidePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final logic = Get.find<CheckGuideLogic>();
    final state = Get.find<CheckGuideLogic>().state;

    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text("检测指导"),
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  children: [
                    Container(
                      width: 5,
                      height: 20,
                      decoration: BoxDecoration(
                          color: orangeColor,
                          borderRadius: BorderRadius.circular(10)),
                    ),
                    const SizedBox(
                      width: 5,
                    ),
                    const Text('操作指引'),
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 8),
                child: Obx(() {
                  return HtmlWidget(state.guidHtml.value);
                }),
              ),
              const SizedBox(
                height: 20,
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        Container(
                          width: 5,
                          height: 20,
                          decoration: BoxDecoration(
                              color: orangeColor,
                              borderRadius: BorderRadius.circular(10)),
                        ),
                        const SizedBox(
                          width: 5,
                        ),
                        const Text('视频教程'),
                      ],
                    ),
                  ],
                ),
              ),
              Obx(() {
                if (state.video.value == null) {
                  return const SizedBox(
                      height: 100,
                      child: Center(
                          child: Text(
                        "暂无视频教程~",
                        style: TextStyle(color: Colors.grey),
                      )));
                }
                return GestureDetector(
                  onTap: () {
                    Get.toNamed(MainRoutes.video,
                        arguments: "${state.video.value?.videoUrl}");
                  },
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(
                      padding: const EdgeInsets.all(10),
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10)),
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Obx(() {
                                  return Text(
                                    "${state.video.value?.checkTitle}",
                                    style: const TextStyle(fontSize: 14),
                                  );
                                }),
                                Obx(() {
                                  return Text(
                                    "${state.video.value?.checkSimpleTxt}",
                                    style: const TextStyle(fontSize: 9),
                                  );
                                }),
                              ],
                            ),
                          ),
                          const SizedBox(
                            width: 10,
                          ),
                          Container(
                            width: 130,
                            height: 90,
                            decoration: BoxDecoration(
                                color: Colors.white,
                                boxShadow: [
                                  BoxShadow(
                                      color: Colors.grey.withAlpha(20),
                                      blurRadius: 5,
                                      spreadRadius: 5)
                                ],
                                borderRadius: BorderRadius.circular(8)),
                            child: FutureBuilder(
                              future: VideoThumbnail.thumbnailFile(
                                  video: "${state.video.value?.videoUrl}"),
                              builder: (BuildContext context,
                                  AsyncSnapshot<String?> snapshot) {
                                if (snapshot.hasData) {
                                  return Stack(
                                    children: [
                                      Positioned.fill(
                                        child: Image.file(
                                          File('${snapshot.data}'),
                                          fit: BoxFit.fill,
                                        ),
                                      ),
                                      const Positioned.fill(
                                          child: Center(
                                        child: Icon(
                                          Icons.play_circle_outline,
                                          color: Colors.grey,
                                        ),
                                      ))
                                    ],
                                  );
                                } else {
                                  return const Center(child: Text("加载中..."));
                                }
                              },
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                );
              })
            ],
          ),
        ),
      ),
    );
  }
}
